<template>

	<view class="userinfo">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="旧密码" prop="oldpassword" required :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.oldpassword" placeholder="请输入原始密码" password clearable></u--input>
			</u-form-item>
			<u-form-item label="新密码" prop="password" required :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.password" placeholder="请输入新密码" password clearable></u--input>
			</u-form-item>
			<u-form-item label="确认新密码" prop="confirmpassword" required :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.confirmpassword" placeholder="请确认新密码" password
					clearable></u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="保存" customStyle="margin-top: 30px" @click="submit"></u-button>
	</view>

</template>

<script>
	import {
		UserService
	} from '../../request/api-package.js'
	import AuthService from '../../request/auth.service.js'
	export default {
		name: 'userInfo',
		components: {},
		data() {
			return {
				lableWidth: '80px',
				userInfo: {

					oldpassword: '',
					password: '',
					confirmpassword: '',
					username: '',

				},
				rules: {
					oldpassword: [{
						required: true,
						message: '请输入原密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							validator: this.validatePass,
							trigger: 'blur'
						}
					],
					confirmpassword: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							validator: this.validatePass2,
							trigger: 'blur',
							required: true
						}
					],

				},

			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getUserInfo() {
				let userinfo = AuthService.getUserinfo().info
				this.userInfo = userinfo
			},
			validatePass (rule, value, callback) {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			},
			validatePass2 (rule, value, callback) {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.userInfo.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.userInfo.username = AuthService.userinfo.info.username
					UserService.updatePwd(this.userInfo).then((res) => {
						if (res.data.success) {
							uni.$u.toast(res.data.message)
							//退出登录，修改完密码，需重新登录
							AuthService.logout()
						} else {
							uni.$u.toast(res.data.message)
						}

					}).catch((res) => {
						console.log(res)
					});
				}).catch(errors => {
					uni.$u.toast('请输入正确的密码')
				})
				
			}


		}
	}
</script>

<style lang="scss" scoped>
	.userinfo {
		padding: 20px;
	}
</style>